以前の記事でも紹介していた無料ホームページ作成サービスの『Wix（ウィックス）』ですが、どんどん新機能が追加されているということで、久しぶりにいろいろと触ってみました。

そのなかでも今回は『スクロールエフェクト』という機能を使って、簡単なLP（ランディングページ）を作ってみたので、使用感などをレビューしてみようと思います。

それでは。

パララックススクロールとは？

まず今回使ってみるWixの新機能のひとつ『スクロールエフェクト』ですが、世間ではパララックススクロールとも言われていて、簡単にいうと表面（上部）に見えている画像やテキストと、その奥（下部）にある背景画像のスクロール速度に差をつけて、奥行きだったり立体感を演出する手法です。

グラフィックデザイナーさんに分かりやすく説明すると、『Illustratorで上下に分けたレイヤーのオブジェクトが同時に別方向に動く』みたいな感じでしょうか。

こんな感じです↓（スマホ未対応）
パラックススクロールを使ったサイト

こんなサイトを見るたびに「カッコいいな～」と感心しながらも、「難しいんだろうな～」と全く導入する気がなかったのですが、Wixのサービスを使えば簡単に出来てしまうとのこと。

以前から『僕の本業であるデザインの仕事をお手伝いいただける提携クリエイター』を募集する簡単なランディングページを作ろうと考えていたので、早速使ってみようと思います。

スクロールエフェクトの導入方法

今回作るのはランディングページ。ちなみに、特定の商品などの販売に特化した縦に長いシングルページをランディングページと言いますが、視覚的な効果でストーリー性を生み出せるパララックススクロールは、ランディングページとも相性が良さそうです。

まずは、Wixにログイン。会員登録がまだの方はこちらの記事をご覧ください。

左下にある「サイトを編集」をクリック。

左上の「サイトメニュー」→「ページを追加」

今回はランディングページなので、余計なヘッダーやフッターは外します。新たに追加されたページの右の「設定」→「レイアウト」→「シンプル」を選択。

左のメニューバーから「背景」→好きな画像を選びます。今回は適当に自分で作った画像を配置しましたが、「背景」→「画像」から、フリー素材などを選ぶことで、さらに何百種類もある写真の中から好きな画像を使うこともできるので、あまり難しいことは考えずに、まずはやってみましょう。

さらに、「背景」→「設定」→スクロールエフェクトの「パララックス」を選択します。これだけで、スクロールエフェクトが使えるようになります。背景画像を薄くしたい場合は、不透明度を調整してください。

さらに、左のメニューバーから「追加」→「テキスト」で必要なテキストを打ち込んでいきます。

あとは必要な画像やテキストを追加しながら、文字の大きさや色などを調整していきます。Wixは文字やオブジェクトの整列もボタンひとつ。まるでIllustratorのよう。

背景画像の上に配置する写真は、多めの方がよりパララックススクロール感がでて、カッコいい仕上がりになるような気がします。

あとは、問い合わせフォームを追加して終了。（これも簡単）

下が実際に僕が作成したランディングページ↓（スマホ未対応）
http://nociws.wixsite.com/portfolio/lp

Wixのページでもホームページの作り方を解説しているので、全体のフローを知りたい方は是非チェックしてみてください。

使ってみた感想

久しぶりにWixを使ってみましたが、あいかわらず操作方法は簡単です。今回は2〜3時間で作ったので、上にあったような見本のサイトまでのクオリティには及びませんが、それも時間をかければ問題なくできると思います。

文字の整列機能や大きさ・色などの変更も直感で操作できるので、Illustratorに慣れている人ならまったく問題ないと思います。それよりも、文章の内容を考えるほうが大変でした。それくらい、Wixでホームページを作るのは簡単なのです。

しいて言うなら、問い合わせフォームにデータを添付できる機能が標準で付いていれば嬉しかったのと、スクロールエフェクトがスマホ対応になっていないこと。それは今後に期待しましょう。（データ添付機能はオプション）

まとめ

このように、簡単にパラックススクロールを使ったサイトも作れるWix。HTMLやワードプレスを覚える時間がない、多少は知識があるけど手軽にもっと高度でオシャレなサイトが作りたい人には、おすすめのサービスです。

ちなみに、このランディングページで告知している『提携クリエイターさん募集』は本当なので、興味のある人はぜひぜひご連絡ください！